<template>
	<view class="calendar">
		<view class="mb-3 f-size-14" style="position: relative;">
			<text @click="MonthShow = !MonthShow" style="color: #7D7D7D;">{{MonthList.find(v => v.value ==
				Month).label}} {{ year }}</text>
			<image style="width: 24rpx;height: 24rpx;" src="/static/icon/more.png" mode="" class="ml-1"></image>
			<view class="Monthlist bor-radius-10 py-1" v-show="MonthShow" style="background-color: #fff;">
				<view class="Monthlist-item t-center f-size-12" v-for="(item) in MonthList" @click="changeMonth(item)">
					{{ item.label }} {{ year }}
				</view>
			</view>
		</view>
		<view class="week">
			<text v-for="(item, index) in weekList" :key="index" style="color: #858f9c;font-weight: 600;">
				{{ item }}
			</text>
		</view>
		<!-- swiper日历 -->
		<view class="swiper d-flex" style="flex-wrap: wrap;">
			<view class="swiper-item-view" @click="click(sindex)" v-for="(sitem, sindex) in calendarList[Month].days"
				:key="sindex">
				<view class="day"
					:style="{ backgroundColor: activekey.includes(sindex) ? selectColor : '', color: activekey.includes(sindex) ? 'white' : 'black' }">
					{{ sitem }}
					<!-- 选中红点 -->
					<view class="tips" v-if="activekey.includes(sindex)">
						<text :style="{ background: selectColor }"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			weekList: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
			year: '',
			activekey: [],
			MonthList: [{
				label: "January",
				value: 0
			}, {
				label: "February",
				value: 1
			}, {
				label: "March",
				value: 2
			}, {
				label: "April",
				value: 3
			}, {
				label: "May",
				value: 4
			}, {
				label: "June",
				value: 5
			}, {
				label: "July",
				value: 6
			}, {
				label: "August",
				value: 7
			}, {
				label: "September",
				value: 8
			}, {
				label: "October",
				value: 9
			}, {
				label: "November",
				value: 10
			}, {
				label: "December",
				value: 11
			}],
			MonthShow: false,
			calendarList: [],
			Month: ''
		}
	},
	// 3A86F4
	created() {
		this.getMonthlyDataForCurrentYear();
		this.MonthList = this.MonthList.slice(this.Month) //截取数组，获得从当前月份开始的数组
	},
	// 获取当前选中时间
	watch: {
		selectTime: {
			handler(newVal, oldVal) {
				this.$emit('changeTime', this.selectTime);
			},
			deep: true
		},

	},
	props: {
		// 需要显示的月份
		maxRange: {
			default: () => {
				return 24
			}
		},
		isRange: {
			default: () => {
				return true
			}
		},
		selectColor: {
			default: () => {
				return '#28ccae'
			}
		},
		defaultTextColor: {
			default: () => {
				return '#333333'
			}
		},
		tipsList: {
			default: () => {
				return []
			}
		}
	},
	methods: {
		modifyactivekey(val) {
			this.activekey = val
		},
		changeMonth(item) {
			this.Month = item.value
			this.$emit('changeMonth', this.Month + 1)
		},
		getMonthlyDataForCurrentYear() {
			const currentYear = new Date().getFullYear();
			this.year = currentYear
			this.Month = new Date().getMonth()
			console.log(this.Month);

			for (let month = 0; month < 12; month++) {
				// 获取每个月的第一天和最后一天
				const firstDay = new Date(currentYear, month, 1);
				const lastDay = new Date(currentYear, month + 1, 0);

				// 获取每个月的天数、月份和年份
				const daysInMonth = lastDay.getDate();
				const monthName = firstDay.toLocaleDateString('default', {
					year: 'numeric',
					month: 'long'
				});

				// 将数据添加到数组中
				this.calendarList.push({
					month: monthName,
					days: daysInMonth,
					firstDay: firstDay.toDateString(),
					lastDay: lastDay.getDate()
				});
			}

			console.log(this.calendarList);
		},

		click(item) {
			let value = item
			let year = new Date().getFullYear()
			item = (item + 1) + ''
			let day = item.length == 2 ? item : ('0' + item)
			let exist = true
			if (!(this.activekey.includes(value))) {
				this.activekey.push(item)
				exist = false
			}
			this.$emit('changeTime', {
				all: year + '-' + (this.Month - 0 + 1) + '-' + day,
				day: day,
				exist
			});
		},
	}
}
</script>
<style lang="scss" scoped>
@import url("index.scss");
</style>